<template>
    <div class="x">
        插槽
        <slot></slot>
    </div>
    <div :class="[zs.div,zs.border]">
        动态CSS
    </div>
</template>

<script setup lang='ts'>
// import { ref, reactive } from 'vue'
import { ref } from 'vue'
const style = ref({
    color: 'red'
})

</script>

<style scoped lang="scss">
// 插槽选择器
:slotted(.a) {
    color: red
}

//穿透scoped作用于限制
:global(#div111) {
    color: brown;
}

// 动态
.x {
    color: v-bind('style.color');
}
</style>

<!-- 对应:class="$style.div" -->
<style module="zs">
.div {
    color: red
}
.border{
border: 1px solid #ccc;}

</style>